<?php
/**
 * 博客热门文章组件
 * 用于展示博客中的热门文章列表
 */
$configKey = isset($configKey) ? $configKey : 'blog-popular';
// 从页面配置获取博客热门文章组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => 'blog-popular',
    'section_pretitle' => '',
    'section_title' => '热门文章',
    'section_subtitle' => '查看热门文章，发现更多相关内容',
    'bg_color' => 'white',
    'border_radius' => 'xl',
    'shadow' => 'sm',
    'padding' => '6',
    'title_margin_bottom' => '4',
    'space_y' => '4',
    'post_count' => 3,
    'image_width' => '20',
    'image_height' => '20',
    'image_border_radius' => 'lg',
    'transition_duration' => '300',
    'hover_effect' => 'group-hover:scale-110',
    'title_class' => 'font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors',
    'date_class' => 'text-xs text-gray-500 mt-1',
    'latest_posts' => [
        [
            'id' => 3,
            'title' => '提升网站加载速度的10个实用技巧',
            'category' => 'web-dev',
            'category_name' => '网页开发',
            'author' => [
                'name' => '王强',
                'avatar' => 'https://picsum.photos/seed/author3/100/100'
            ],
            'date' => '2023-06-10',
            'read_time' => '6 分钟',
            'image' => 'https://picsum.photos/seed/blog3/400/300',
            'image_alt' => '网站性能分析图表',
            'comments' => 12
        ],
        [
            'id' => 4,
            'title' => '现代UI设计中的微交互原则',
            'category' => 'ux-design',
            'category_name' => 'UX设计',
            'author' => [
                'name' => '刘芳',
                'avatar' => 'https://picsum.photos/seed/author4/100/100'
            ],
            'date' => '2023-06-05',
            'read_time' => '7 分钟',
            'image' => 'https://picsum.photos/seed/blog4/400/300',
            'image_alt' => 'UI设计微交互演示',
            'comments' => 9
        ],
        [
            'id' => 5,
            'title' => '人工智能在软件开发中的应用现状',
            'category' => 'tech-news',
            'category_name' => '技术资讯',
            'author' => [
                'name' => '赵伟',
                'avatar' => 'https://picsum.photos/seed/author5/100/100'
            ],
            'date' => '2023-05-22',
            'read_time' => '9 分钟',
            'image' => 'https://picsum.photos/seed/blog5/400/300',
            'image_alt' => '人工智能与软件开发概念图',
            'comments' => 15
        ],
        [
            'id' => 6,
            'title' => 'TypeScript高级类型技巧与实践',
            'category' => 'web-dev',
            'category_name' => '网页开发',
            'author' => [
                'name' => '张明',
                'avatar' => 'https://picsum.photos/seed/author1/100/100'
            ],
            'date' => '2023-05-18',
            'read_time' => '11 分钟',
            'image' => 'https://picsum.photos/seed/blog6/400/300',
            'image_alt' => 'TypeScript代码示例',
            'comments' => 21
        ]
    ]
], $pageConfig['components'][$configKey] ?? []);

// 取最新文章的前N篇作为热门文章
$popularPosts = array_slice($data['latest_posts'], 0, $data['post_count']);

// 处理激活分类和标签
$activeCategory = $_GET['category'] ?? 'all';
$activeTag = $_GET['tag'] ?? '';

// 构建URL参数
function url($id){
    global $activeCategory;
    $urlParams = ['id=' . $id];
    if ($activeCategory !== 'all') {
        $urlParams[] = 'category=' . $activeCategory;
    }
    if (!empty($activeTag)) {
        $urlParams[] = 'tag=' . $activeTag;
    }
    $urlQuery = !empty($urlParams) ? '?' . implode('&', $urlParams) : '';
    return '/blog/' . $urlQuery;
}

?>

<!-- 热门文章 -->
<div id="<?= $data['section_id'] ?>" class="bg-<?= $data['bg_color'] ?> rounded-<?= $data['border_radius'] ?> shadow-<?= $data['shadow'] ?> p-<?= $data['padding'] ?>">
    <h3 class="text-xl font-bold mb-<?= $data['title_margin_bottom'] ?>">
        <?= $data['section_title'] ?>
    </h3>
    <div class="space-y-<?= $data['space_y'] ?>">
        <?php foreach ($popularPosts as $index => $post): ?>
            <a href="<?= url($post['id']) ?>" class="flex group">
                <div class="flex-shrink-0 w-<?= $data['image_width'] ?> h-<?= $data['image_height'] ?> rounded-<?= $data['image_border_radius'] ?> overflow-hidden mr-4">
                    <img 
                        src="<?= htmlspecialchars($post['image']) ?>" 
                        alt="<?= htmlspecialchars($post['image_alt']) ?>"
                        class="w-full h-full object-cover <?= $data['hover_effect'] ?> transition-transform duration-<?= $data['transition_duration'] ?>"
                    >
                </div>
                <div>
                    <h4 class="<?= $data['title_class'] ?>">
                        <?= htmlspecialchars($post['title']) ?>
                    </h4>
                    <p class="<?= $data['date_class'] ?>">
                        <?= htmlspecialchars(date('M d, Y', strtotime($post['date']))) ?>
                    </p>
                </div>
            </a>
        <?php endforeach; ?>
    </div>
</div>